<template>
  <view class="my-content">
		<view class="head">
			<view class="head-name">个人中心</view>
		</view>

	  <view class="version">
	  	<view class="head">
	  		<view class="head-left"><image
	        class="avatar"
	        title="获取头像"
	        :src="avatarUrl || avatar"
	      ></image></view>
	  		<view class="head-center">
	  			<view class="shop-info">
	  				<view class="shop-name">{{ storeInfo.merchantAlias || userInfo.nickName }}</view>
	  				<view class="shop-tag" v-if="userInfo.userType === 2">
	  					{{
	  					  userInfo.levelName || "商家"
	  					}}
	  				</view>
	  				<view class="shop-tag" v-else>
	  					{{
	  					  userInfo.levelName || "普通会员"
	  					}}
	  				</view>
	  				<!-- <view class="shop-tag"></view> -->
	  			</view>
	  			<view class="shop-fans">
	  				{{ userCount || "0" }}会员 | {{ storeInfo.fansCount || "0" }}粉丝
	  			</view>
	  		</view>
	  		<view class="head-right" @click="toPage('/pages/user/my-info')">
	  			<u-icon name="arrow-right" size="20"></u-icon>
	  		</view>
	  	</view>
	  	<view class="wallet-plate">
	  		<view class="wallet-head-plate">
	  			<image
	  			  class="wallet_bg"
	  			  :src="shopMallImgUrl+'wallet_bg1.png'"
	  			></image>
	  			<view class="wallet-head">
	  				<view class="wallet-head-left">
	  					<view class="shop-ad">商家入驻</view>
	  					<view class="shop-subad">成为商家赚钱更多福利</view>
	  				</view>
	  				<view class="shop-into-btn" @click="toVerFunStore('/pages/storeManage/my-store')">商家入驻</view>
	  			</view>
	  		</view>
	  		<view class="wallet-box">
	  			<image
	  			  class="wallet_bg_2"
	  			  :src="shopMallImgUrl+'wallet_bg2.png'"
	  			></image>
	  			<view class="wallet-plate-info" @click="toVerFun('/pages/user/my-wallet')">
	  				<view class="wallet-title">我的钱包<u-icon name="arrow-right" size="16" color="#fff"></u-icon></view>
	  				<view class="ad-title">点击查看优惠账户补贴</view>
	  			</view>
	  			<view class="wallet-money-info">
	  				<view class="wallet-money-title">
	  					资产总额（元）<u-icon name="eye-fill" size="20" @click="showNumber(1)" v-if="showMoney"></u-icon><u-icon name="eye-off" size="20" @click="showNumber(2)" v-else></u-icon>
	  				</view>
	  				<view class="money-number" v-if="showMoney">
	  					{{
	  					  Number((walletInfo && walletInfo.totalAmount) || 0) +
	  					  Number(cashFee || 0) +
	  					  Number(mallFee || 0)
	  					}}
	  				</view>
					<view class="money-number" v-else>
						******
					</view>
	  				<view class="money-tip">
	  					贷款/跨界收入/联盟消费券补贴均可提现
	  				</view>
	  			</view>
	  		</view>
	  		
	  	</view>
	  	<view class="Common-plate">
	  		<view class="Common-head-title">
	  			常用功能
	  		</view>
	  		<view class="Common-list">
	  			<view class="Common-li" @click="toShare()">
	  				<u--image :src="shopMallImgUrl+'comm_1.png'" width="68rpx" height="68rpx"></u--image>
	  				<view class="Common-title">
	  					分享推广
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('none')">
	  				<u--image :src="shopMallImgUrl+'comm_2.png'" width="68rpx" height="68rpx"></u--image>
	  				<view class="Common-title">
	  					联系我们
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('none')">
	  				<u--image :src="shopMallImgUrl+'comm_4.png'" width="68rpx" height="68rpx"></u--image>
	  				<view class="Common-title">
	  					消息中心
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="toPage('/pages/user/my-info')">
	  				<u--image :src="shopMallImgUrl+'comm_5.png'" width="68rpx" height="68rpx"></u--image>
	  				<view class="Common-title">
	  					个人设置
	  				</view>
	  			</view>
	  		</view>
	  	</view>
	  	<view class="Common-plate">
	  		<view class="Common-head-title">
	  			全部功能
	  		</view>
	  		<view class="rever-list">
	  			<view class="Common-li" @click="allGoto('/pages/o2o/index')">
	  				<u--image :src="shopMallImgUrl+'ability_1.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					本地生活
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('/pages/contractManage/contractList')">
	  				<u--image :src="shopMallImgUrl+'ability_2.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					签约管理
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('none')">
	  				<u--image :src="shopMallImgUrl+'ability_3.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					卡包
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('/pages/employeeManage/employeeList')">
	  				<u--image :src="shopMallImgUrl+'ability_4.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					柜员管理
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('/pages/employeeManage/counterLogin')">
	  				<u--image :src="shopMallImgUrl+'ability_5.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					柜员登录
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('/pages/storeReconciliation/reconciliationList')">
	  				<u--image :src="shopMallImgUrl+'ability_6.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					门店对账
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('/pages/storeGift/giftSetList')">
	  				<u--image :src="shopMallImgUrl+'ability_7.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					开店福利
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('none')">
	  				<u--image :src="shopMallImgUrl+'ability_8.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					商家海报
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="allGoto('none')">
	  				<u--image :src="shopMallImgUrl+'ability_9.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					积分码
	  				</view>
	  			</view>
	  			<view class="Common-li" @click="toDevice()">
	  				<u--image :src="shopMallImgUrl+'ability_10.png'" width="56rpx" height="56rpx"></u--image>
	  				<view class="Common-title">
	  					设备管理
	  				</view>
	  			</view>
	  		</view>
	  	</view>
	  </view>
	  <view class="out-btn" @click="getSubmit">
	  		  退出登录
	  </view>
   
    
    <u-modal
      class="my-modal"
      :show="show"
      showCancelButton
      :content="content"
      @cancel="cancel"
      @confirm="confirm"
    ></u-modal>
	<u-popup :show="showPop" mode="center" :round="10" :safeAreaInsetBottom="false">
				<view class="storeTip">
					<view class="title">提示</view>
					<view class="word">店铺未开通支付功能</view>
					<view class="btn-box">
						<view class="cancel" @tap="cancelPop">取消</view>
						<view class="gotoOpen" @tap="gotoPage">去开通支付</view>
					</view>
				</view>
	</u-popup>
	
	<!-- <view class="sub">
	  <u-button @click="getSubmit" type="primary" text="退出登录"></u-button>
	</view> -->
	
	
  </view>
</template>

<script>
import {shopMallImgUrl} from "@/common/config.js"
import { getStoreData, setStoreData, httpPost, httpGet } from "@/utils/http.js";
const pic1 = require(`@/img/my/my1.png`);
const pic3 = require(`@/img/my/my3.png`);
const pic2 = require(`@/img/my/my4.png`);
const icon1 = require(`@/img/my/pic1.png`);
const icon2 = require(`@/img/my/pic2.png`);
const icon3 = require(`@/img/my/pic3.png`);
const icon4 = require(`@/img/my/pic4.png`);
const icon5 = require(`@/img/my/pic5.png`);
const avatar = require(`@/img/my/avatar1.jpg`);
export default {
  data() {
    return {
      avatarUrl: "",
      avatar,
      content: "您暂未实名认证，请先认证",
      show: false,
      icon1,
      icon2,
      icon3,
      icon4,
      icon5,
      pic1,
      pic3,
      pic2,
      userInfo: {},
      userCount: 0,
      storeInfo: {},
      verFlag: false,
	  showPop:false,
	  storeStatus:null,//10申请中，12店铺通过但没有进件，15第三方银行审核中，20审核通过，30审核失败，40审核店铺违规
	  isHasStore:false,
	  walletInfo:{
		  totalAmount:0
	  },
	  cashFee: "",
	  mallFee: "",
	  showMoney:false,
	  shopMallImgUrl:shopMallImgUrl
    };
  },
  onShow() {
	this.getstoreInfo();
	this.myWallteData();
	this.walletArrFun();
	this.myWallet();
    this.listDirectstoreInfo();
    this.getVer();
    this.getInfo();
    this.listDirectUserCount();
    const avatarUrl = getStoreData("avatarUrl");
    if (avatarUrl) {
      this.avatarUrl = avatarUrl;
    }
  },
  onload() {
    
    // this.listDirectUserCount();
  },
  methods: {
	  myWallteData() {
	  	const _this = this;
	  	httpGet("/api/userwallet/info")
	  		.then((res) => {
	  			_this.mallFee = res.data.currentMallFee;
	  		})
	  		.catch((e) => {
	  			//
	  		});
	  },
	  myWallet() {
	  	const _this = this;
	  	httpGet("/api/usercashwallet/info")
	  		.then((res) => {
	  			_this.cashFee = res.data.cashFee;
	  		})
	  		.catch((e) => {
	  			//
	  		});
	  },
	  walletArrFun() {
	  	const _this = this;
	  	httpGet("/api/sellerstorewallet/info")
	  		.then((res) => {
	  			if (res.data) {
	  				_this.walletInfo = res.data;
	  			}
	  
	  		})
	  		.catch((e) => {
	  			//
	  		});
	  },
	  getstoreInfo(){
	  	let that=this;
	  	httpGet("/api/sellerstore/selfInfo")
	  	  .then((res) => {
	  	         if(!res.data){
	  				 that.isHasStore=false;
	  			 }else{
	  				 that.isHasStore=true;
	  				 that.storeStatus=res.data.storeStatus;
	  			 }
				
	  	  })
	  	  .catch((e) => {});
	  },
    getSubmit() {
      uni.clearStorage();
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
    getVer() {
      const _this = this;
      httpGet("/api/userverify/ok")
        .then((res) => {
          if (res.data.approveStatus >= 20) {
            _this.verFlag = true;
          }
        })
        .catch((e) => {
          _this.verFlag = false;
        });
    },
    cancel() {
      this.show = false;
    },
    confirm() {
      this.toPage("/pages/user/certify");
    },
    toVerFun(v) {
      if (this.verFlag) {
        this.toPage(v);
      } else {
        this.show = true;
      }
    },
    toPage(v) {
      uni.navigateTo({
        url: v,
      });
    },
    getInfo() {
      const _this = this;
      httpGet("/api/user/info")
        .then((res) => {
          _this.userInfo = res.data;
          setStoreData("userInfo", _this.userInfo);
        })
        .catch((e) => {
          _this.userInfo = {};
        });
    },
    listDirectstoreInfo() {
      const _this = this;
      httpGet("/api/sellerstore/selfInfo")
        .then((res) => {
          _this.storeInfo = res.data || {};
          setStoreData("storeInfo", _this.storeInfo);
        })
        .catch((e) => {
          _this.storeInfo = {};
        });
    },
    listDirectUserCount() {
      const _this = this;
      httpGet("/api/user/listDirectUserCount")
        .then((res) => {
          _this.userCount = (res.data && res.data.totalPromoteCount) || 0;
        })
        .catch((e) => {
          _this.userCount = 0;
        });
    },
	cancelPop(){
		this.showPop=false;
	},
	gotoPage(){
		uni.navigateTo({
		  url:'/pages/storeManage/creat-store',
		});
		this.showPop=false;
	},
	toVerFunStore(){
		console.log(this.isHasStore)
		if(this.isHasStore){
			if(this.storeStatus==10){
				 uni.$u.toast("店铺申请审核中");
				 return
			}else if(this.storeStatus==12){
				this.showPop=true;
				//uni.$u.toast("店铺初审中，请耐心等待");
				return
			}else if(this.storeStatus==15){
				uni.$u.toast("第三方银行审核中，请耐心等待");
				return
			}else if(this.storeStatus==20){
				uni.navigateTo({
				  url: '/pages/storeManage/my-store',
				});
				return
			}else if(this.storeStatus==30||this.storeStatus==40){
				uni.navigateTo({
				  url:'/pages/storeManage/my-store',
				});
			}
		}else{//没有店铺，跳转申请开店
			uni.navigateTo({
			  url:'/pages/storeManage/my-store',
			});
			return
		}
	},
	toDevice(){
		uni.navigateTo({
		  url:'/pages/equipmentManagement/equipmentManagement',
		});
	},
	toShare(){
		uni.navigateTo({
		  url:'/pages/user/myInvitationCode',
		});
	},
	allGoto(url){
		if(url=='none'){
			uni.$u.toast("功能尚在开发中");
		}else{
			if(this.isHasStore){
				if(this.storeStatus==10){
					 uni.$u.toast("店铺申请审核中");
					 return
				}else if(this.storeStatus==12){
					this.showPop=true;
					
					return
				}else if(this.storeStatus==15){
					uni.$u.toast("第三方银行审核中，请耐心等待");
					return
				}else if(this.storeStatus==20){
					uni.navigateTo({
					  url: url
					});
					return
				}else if(this.storeStatus==30||this.storeStatus==40){
					uni.navigateTo({
					  url:url
					});
				}
			}else{//没有店铺，跳转申请开店
				uni.navigateTo({
				  url:'/pages/storeManage/my-store',
				});
				
			}
		}
		
		
	},
	jumpInter(url){
		uni.navigateTo({
		  url:url,
		});
	},
	showNumber(){
		this.showMoney=!this.showMoney;
	}
  },
};
</script>

<style lang="scss">
.my-content {
  // display: flex;
  // flex-direction: column;
  background: #f9f9f9;
  background: linear-gradient(180deg, #FFDDDD 0%, #FFE9DD 46.66%, #FFFFFF 64.81%);;
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  padding: 15px;
  
  .head {
  	display: flex;
  	flex-direction: row;
  	justify-content: flex-start;
  	width: 100%;
  	margin-left: 30rpx;
  	padding-top: 90rpx;
  	margin-bottom: 40rpx;
  box-sizing: border-box;
  	.head-name {
  		font-size: 40rpx;
  		font-weight: bold;
  		margin-right: 20rpx;
  	}
  
  }
  .sub {
    margin: 48px 0;
    /deep/.u-button {
      width: 78vw;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
    }
  }
  .my-modal {
    padding: 32px 24px;
  }
  /deep/.u-cell__title {
    margin-left: 6px;
  }
  .my-top {
    display: flex;
    width: 100%;
    .left {
      border-radius: 60px;
      overflow: hidden;
      display: block;
      width: 60px;
      height: 60px;
      border: 3px solid #fff;
      margin-right: 12px;
      .avatar-wrapper {
        padding: 0;
        margin: 0;
        width: 60px;
        height: 60px;
        border: none;
        &::after {
          border: none !important;
        }
      }
      .avatar {
        width: 60px;
        height: 60px;
      }
    }
    .right {
      flex: 1;
      .title {
        font-size: 18px;
        color: #333;
        line-height: 24px;
        margin: 6px 0;
      }
      .store-name {
        .flex {
          display: inline-block;
          background: #eee;
          border-radius: 20px;
          padding: 2px 8px;
          height: 20px;
          line-height: 20px;
          align-items: center;
          font-size: 12px;
          > view {
            float: left;
          }
          .name {
            margin-left: 6px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
          }
        }
      }
    }
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    box-sizing: border-box;
    width: calc(100vw - 32px);
    /deep/.u-cell__body {
      padding: 16px 0 !important;
    }
    /deep/.u-cell-group__wrapper {
      .u-line:first-child,
      .u-cell:last-child .u-line {
        display: none !important;
      }
    }
  }
  .top1 {
    margin: 24px 0;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    width: calc(100vw - 32px);
    > view {
      color: #999;
      font-size: 14px;
      margin-top: 12px;
    }
    .text {
      font-size: 18px;
      color: #333;
    }
    .tab1 {
      width: 33.33%;
    }
    .tab2 {
      display: flex;
      justify-content: center;
    }
  }
}
.storeTip{
	width: 600rpx;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
	.title{
		text-align: center;
		font-size: 40rpx;
	}
	.word{
		text-align: center;
		font-size: 28rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}
	.btn-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: center;
		font-size: 24rpx;
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
		.cancel{
			width: 50%;
			color: #f72222;
		}
		.gotoOpen{
			width: 50%;
			color: #11baef;
		}
	}
}
.version{
	.head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.head-left{
			.avatar{
				width: 96rpx;
				height: 96rpx;
			}
		}
		.head-center{
			width: 500rpx;
			.shop-info{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				.shop-name{
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
				}
				.shop-tag{
					padding: 10rpx 20rpx;
					background: linear-gradient(to bottom,#666666,#000000);
					font-size: 24rpx;
					color: #FFE794;
					border-radius: 40rpx;
				}
			}
		}
		.head-right{
			width: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
	}
	.wallet-plate{
		margin-top: 50rpx;
		.wallet-box{
			position: relative;
			.wallet_bg_2{
				width: 690rpx;
				height: 410rpx;
			}
		}
		.wallet-head-plate{
			position: relative;
			height: 138rpx;
			.wallet_bg{
				width: 690rpx;
				height: 138rpx;
			}
		}
		.wallet-head{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 630rpx;
			position: absolute;
			top:40rpx;
			left: 30rpx;

			.wallet-head-left{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				.shop-ad{
					font-size: 36rpx;
					color: #9E7231;
					font-weight: bold;
					line-height: 60rpx;
					margin-right: 10rpx;
				}
				.shop-subad{
					font-size: 28rpx;
					color: #9E7231;
					margin-top: 16rpx;
				}
			}
			.shop-into-btn{
				padding: 12rpx 30rpx;
				background-color: #EF684B;
				font-size: 28rpx;
				color: #fff;
				border-radius: 30rpx;
			}
		}
		.wallet-plate-info{
			width: 630rpx;
			position: absolute;
			top: 40rpx;
			left: 30rpx;
			.wallet-title{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 10rpx;
			}
			.ad-title{
				font-size: 28rpx;
				color: #fdbaac;
			}
		}
		.wallet-money-info{
			position: absolute;
			top: 160rpx;
			width: 626rpx;
			left: 12rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			.wallet-money-title{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				font-size: 28rpx;
			}
			.money-number{
				font-size: 48rpx;
				font-weight: bold;
				margin-top: 4rpx;
				margin-bottom: 28rpx;
			}
			.money-tip{
				padding: 16rpx 20rpx;
				background-color: #fdbaac;
				font-size: 24rpx;
				color: #cf6f5b;
				border-radius: 10rpx;
			}
		}
	}
}
.Common-plate{
	background-color: #fff;
	margin-top: 40rpx;
	border-radius: 10rpx;
	.Common-head-title{
		font-size: 36rpx;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #F4F2F0;
		font-weight: bold;
	}
	.Common-list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.Common-li{
			display: flex;
			flex-direction: column;
			justify-items: center;
			justify-content:center;
			text-align: center;
			align-items: center;
			padding: 30rpx 20rpx;
			
			.Common-title{
				font-size: 24rpx;
			}
		}
		
	}
	.rever-list{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		.Common-li{
			display: flex;
			flex-direction: column;
			justify-items: center;
			justify-content:center;
			text-align: center;
			align-items: center;
			padding: 20rpx;
			.Common-title{
				font-size: 24rpx;
			}
		}
	}
}
.out-btn{
	background-color: #EF684B;
	width: 100%;
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	border-radius:10rpx;
	margin-top: 80rpx;
}

</style>
